<template>
	<view class="bb">
		<view class="b-1">
			<image src="/static/images/user_bg.png" class="b-img"></image>
			<view class="b-2">
				<image src="/static/rankingList/ranking7.png" class="b-img2"></image>
				<text class="text">
					<text  style="font-size: 15px; display: block;" class="t-1">钓鱼小达人</text>
					<text user-select="true" style="font-size: 12px; display: block; " class="t-1">123454215</text>
				</text>
				<view class="b-3">
					<view class="b-box">
						<view class="b-c">我的余额</view>
						<view class="b-c">0.00</view>
					</view>
					<view class="b-box">
						<view class="b-c">回鱼收入</view>
						<view class="b-c">0</view>
					</view>
					<view class="b-box">
						<view class="b-c">中标金额</view>
						<view class="b-c">0</view>
					</view>
					<view class="b-box">
						<view class="b-c">优惠卷</view>
						<view class="b-c">0</view>
					</view>
				</view>
				<view class="back">
				<view class="b-4">
					<view class="b-a">天鲤钓场.大优惠</view>
					<view class="b-b">一次买够十场，即可享受免费赠送一场</view>
					<view class="b-g">
						<view class="b-cc">
							<view class="b-d">买十场赠送一场</view>
							<view class="b-e">鲤鱼塘</view>
							<view class="b-f">¥1100</view>
						</view>
						<view class="b-cc">
							<view class="b-d">买十场赠送一场</view>
							<view class="b-e">综合塘</view>
							<view class="b-f">¥1200</view>
						</view>
						<view class="b-cc">
							<view class="b-d">买十场赠送一场</view>
							<view class="b-e">综合塘</view>
							<view class="b-f">¥1200</view>
						</view>
					</view>
					<view class="b-5">
						<view class="b-price">我的成绩</view>
						<view class="b-n">
							<view>渔获</view>
							<view >0</view>
						</view>
						<view class="b-n">
							<view >次数</view>
							<view>0</view>
						</view>
						<view class="b-n">
							<view>过百</view>
							<view>0</view>
						</view>
						<view class="b-n">
							<view>坑冠</view>
							<view>0</view>
						</view>
					</view>
					<view class="b-6">
						<view class="din">
							<image src="/static/images/myorder.png" class="img-din"></image>
							<view class="t-din">我的订单</view>
						</view>
						<view class="din">
							<image src="/static/images/suborder.png" class="img-din"></image>
							<view class="t-din">预约订单</view>
						</view>
						<view class="din">
							<image src="/static/images/myfav.png" class="img-din"></image>
							<view class="t-din">我的收藏</view>
						</view>
						<view class="din">
							<image src="/static/images/myshare.png" class="img-din"></image>
							<view class="t-din">商城订单</view>
						</view>
					</view>
					<view class="b-7">
						<view class="b-t">
							<image src="/static/images/tuiguang.png" class="img-t"></image>
							<text class="t-b">推广分享</text>
						</view>
						<view class="b-t">
							<image src="/static/images/privateicon.png" class="img-t"></image>
							<text class="t-b">隐私政策</text>
						</view>
					</view>
				</view>	
				</view>
										
			</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>

.bb{
	width: 100%;
	height: 1300rpx;
	
	background-color: #f7f7f7;
}
	.b-1 {
		position: relative;
		width: 100%;
		height: 380rpx;
	}

	.b-img {
		width: 100%;
		height: 380rpx;
	}

	.b-img2 {
		width: 100rpx;
		height: 100rpx;

	}

	.b-2 {
		position: absolute;
		top: 10rpx;
		left: 30rpx;
		width: 620rpx;
		height: 300rpx;

	}

	.t-1 {
		color: #fff;
	}

	.text {
		position: absolute;
		top: 10rpx;
		left: 120rpx;
		width: 180rpx;
		height: 100rpx;

	}

	.b-3 {
		position: absolute;
		top: 120rpx;
		left: 60rpx;
		width: 640rpx;
		height: 90rpx;
	}

	.b-box {
		width: 160rpx;
		height: 90rpx;
		float: left;
	}

	.b-c {
		width: 160rpx;
		height: 30rpx;
		margin: 5rpx auto 30rpx 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.b-4 {
		position: absolute;
		top: 270rpx;
		width: 690rpx;
		height: 300rpx;
		background-color: #3b4055;
		border-radius: 14rpx;
	}

	.b-a {
		width: 690rpx;
		height: 60rpx;
		font-size: 35rpx;
		color: #cebeb0;
		margin: 10rpx 0 10rpx 0;
		text-align: center;
	}

	.b-b {
		width: 690rpx;
		height: 60rpx;
		font-size: 25rpx;
		color: #887e83;
		text-align: center;
	}
	.b-g{
		width: 690rpx;
		height: 160rpx;
		
	}
	.b-cc{
		width: 200rpx;
		height: 140rpx;
		background-color:#fff4e3 ;
		float: left;
		margin: 5rpx 0 5rpx 23.1rpx;
		border-radius: 16rpx;
	}
	.b-d{
		color: black;
		margin: 10rpx auto 10rpx auto;
		font-size: 22rpx;
		text-align: center;
	}
	.b-e{
		color: #504533;
		text-align: center;
	}
	.b-f{
		width: 130rpx;
		height: 40rpx;
		color: #e9ddca;
		background-color: #666271;
		margin: 10rpx auto 0 auto;
		border-radius: 45rpx;
		text-align: center;		
	}
	
	.b-5{
		position: absolute;
		top: 320rpx;
		left:5rpx;
		width: 690rpx;
		height: 200rpx;
		background-color:#fff;
		border-radius: 16rpx;
		
	}
	.b-price{
		width: 620rpx;
		height: 50rpx;
		margin: 10rpx 0 10rpx 30rpx;
		color: #6a6a6a;
	}
	.b-n{
		width: 162.5rpx;
		height: 100rpx;
		color: #858585;
		float: left;
		margin: 10rpx 0 0 10rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.b-6{
		position: absolute;
		top: 540rpx;
		width: 690rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
	.din{
		width: 160;
		height: 200rpx;
		float: left;
		margin:20rpx 0 0 40rpx ;
		text-align: center;
	}
	.img-din{
		width: 80rpx;
		height: 80rpx;
		
	}
	.t-din{
		margin: 15rpx 0 0 0;
	}
	.img-t{
		width: 40rpx;
		height: 40rpx;
		margin:35rpx 30rpx 35rpx 30rpx;
	}
	.b-7{
		position: absolute;
		top: 760rpx;
		width: 690rpx;
		height: 240rpx;
		background-color: #fff;
		
	}
	.b-t{
		
		width: 100%;
		height: 110rpx;
		
		
		font-size: 40rpx;
	}
	.t-b{
		position: absolute;
		width: 200rpx;
		height: 110rpx;
		line-height: 110rpx;
	}
</style>